<template>
  <footer class="footer">
    <span class="todo-count">剩余<strong>{{list.filter(item => !item.isDone).length}}</strong></span>
    <ul class="filters">
      <li>
        <a :class="type === 'all' ? 'selected' : ''" href="javascript:;" @click="$emit('changeClick','all')">全部</a>
      </li>
      <li>
        <a :class="type === 'act' ? 'selected' : ''" href="javascript:;" @click="$emit('changeClick','act')">未完成</a>
      </li>
      <li>
        <a :class="type === 'com' ? 'selected' : ''" href="javascript:;" @click="$emit('changeClick','com')">已完成</a>
      </li>
    </ul>
    <button v-if="list.filter(item => item.isDone).length" class="clear-completed" @click="clear">清除已完成</button>
  </footer>
</template>

<script>
export default {
  props: {
    list: {
      type: Array
    },
    type: {
      type: String
    }
  },
  data () {
    return {}
  },
  methods: {
    clear () {
      this.$emit('clear', this.list.filter(item => item.isDone === false))
    }
  },
  computed: {},
  watch: {},
  filters: {},
  components: {},
  created () {},
  mounted () {}
}
</script>

<style scoped lang='less'>

</style>
